<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *
        {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        .head
        {
            margin: 0px auto;
            width: 500px;
            height: 100px;

            display: flex;
            align-items: center;
        }
        
        .container
        {
            display: flex;
            margin: 0 auto;
            width: 500px;
        }

        .edit
        {
            width: 350px;
            height: 40px;
            box-sizing: border-box;
        }

        .addTask
        {
            background-color: orange;
            color: white;
            border: 0px;
            height: 40px;
            width: 150px;
        }

        .addTask:active
        {
            background-color: rgb(169, 162, 162);
        }
        

        h3
        {
            background-color: rgba(0, 0, 0, 0.718);
            color: white;
            width: 250px;
            line-height: 30px;
            text-align: center;
            border-right: 2px white dotted;
        }

        .task
        {
            margin-top: 10px;
            width: 250px;
            display: flex;
        }

        .task span
        {
            width: 150px;
            line-height: 30px;
            margin-left: 10px;
            font-size: 20px;
        }

        .task .delete
        {
            width: 60px;
            height: 30px;
            font-weight: 900;
        }
        
    </style>
</head>
<body>
    <div class="head">
        <input class="edit" type="text"><input class="addTask" type="button" value="新建任务" onclick="AddTask()">
    </div>
    <div class="container">
        <div class="undo">
            <h3>未完成</h3>
            <!-- <div class="task">
                <input type="checkbox">
                <span>吃饭</span><input class="delete" type="button" value="删除">    
            </div> -->

        </div>

        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>
<script>
    function AddTask()
    {// 往 undo 类中 appendChild 一个div，div里面一个checkbox，一个span，一个button
        let message = document.querySelector(".head .edit")
        console.log(message.value);
        if(message.value == "") return;

        let span = document.createElement('span');
        span.innerHTML = message.value;
        
        let div = document.createElement('div');
        div.className = "task";
        
        let checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.addEventListener('click', function()
        {
            let done = document.querySelector(".done");
            let undo = document.querySelector(".undo");
            let parent = this.parentNode;

            if(this.checked == true)
                done.appendChild(parent);
            else
                undo.appendChild(parent);
        });

        let button = document.createElement('input');
        button.className = "delete"
        button.type = "button";
        button.value = "删除";

        button.addEventListener('click', function()
        {
            let parent = this.parentNode;
            let grandParent = parent.parentNode;

            grandParent.removeChild(parent);
        });

        div.appendChild(checkbox);
        div.appendChild(span);
        div.appendChild(button);

        //console.dir(button);

        let parent = document.querySelector('.undo');
        parent.append(div);
    }
</script>

</html>